import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router,Route,NavLink } from 'react-router-dom';

import Loadable from 'react-loadable';
import Loading from '@/components/Loading';
import PrivateRoute from '@/components/PrivateRoute';
const Counter = Loadable({
  loader:()=> import('@/components/Counter'),
  loading:Loading
})
const TodoList = Loadable({
  loader:()=> import('@/components/TodoList'),
  loading:Loading
})
const Login = Loadable({
  loader:()=>import('@/components/Login'),
  loading:Loading
})
// import Counter from '@/components/Counter';
// import TodoList from '@/components/TodoList';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Router>
          <div className="container">
            <div>
              <NavLink to="/counter">Counter</NavLink>
              <NavLink to="/list">List</NavLink>
            </div>
            <div>
              <Route exact path="/" component={Counter} />
              <PrivateRoute path="/list" component={TodoList} />
              <Route exact path="/counter" component={Counter} />
              <Route exact path="/login" component={Login} />
              {/* 加问号表示可选参数 */}              
              {/*<Route path="/list" component={TodoList}/> */}
            </div>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;
